<template>
  <el-dialog v-if="load" :close-on-click-modal="false" :title="form.template_name" v-model="visible" align-center
    width="1200px" :z-index="2000" @close="handleClose">
    <component v-if="form.code" :is="com" v-model="form" class="print" :isLook="isLook" />
    <template v-if="isLook" #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
    <template v-else #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loadings.submit" @click="submit">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import api from '../../api'
import Template1 from './Template1'
import Template2 from './Template2'
import Template3 from './Template3'
import Template5 from './Template5'
import { ElMessage } from 'element-plus'
const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const form = ref({})
const type = ref(1)
const isLook = ref(false)
const com = computed(() => ['', Template1, Template2, Template3, '', Template5][type.value])
const emit = defineEmits(['close'])
const options = ref([])

// 打开弹窗
const open = async (row, option) => {
  const { ct_id, doc_type } = row
  isLook.value = option?.look === true
  type.value = doc_type
  if (!load.value) {
    load.value = true
    api.getOption().then(res => {
      options.value = res.data
    })
    await 1
  }
  loadings = reactive({})
  visible.value = true
  const res = await api.preview({ ct_id })
  form.value = { value: { contract_no: '', purchase_info: [{}], plan_info: [{}] }, ...res.data,  }
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}
// 提交
const submit = () => {
  loadings.submit = true
  api.update(form.value).then(res => {
    ElMessage.success('修改成功')
    close()
  }).finally(() => {
    loadings.submit = false
  })
}

defineExpose({ open })
</script>